<template>
   <el-container>
     <el-aside width="200px">
    <el-menu router default-active="this.$router.path"
     background-color="#545c64"
       text-color="#fff"
       active-text-color="#ffd04b"
     class="el-menu-demo el-menu-nav" mode="vertical" @select="handleSelect" :unique-opened=true>

      <el-submenu v-for="(item,index) in menu" :index="index+''" :key="index">
        <template slot="title">{{item.name}}</template>
        <el-menu-item v-for="child in item.children"
        							:index="child.path"
        							:key="child.path">{{child.name}}
        </el-menu-item>
      </el-submenu>

      </el-menu>
      </el-aside>

     <el-container>
       <el-header>
         <el-menu router :default-active="activeIndex" text-color="#141414" active-text-color="#ffd04b" class="el-menu-demo el-menu-nav" mode="horizontal" >
          <el-menu-item>{{user.uname}}</el-menu-item>
          <el-submenu index='2' >
            <template slot="title" ></template>

              <router-link :to="{path:'/updateUser'}" tag="el-menu-item">修改个人信息</router-link>

              <el-menu-item><el-button @click="clean" type="text" style="color:black">退出</el-button></el-menu-item>
          </el-submenu>
          <el-menu-item>电力巡检系统</el-menu-item>
         </el-menu>
         </el-header>
       <el-main>
         <router-view></router-view>
       </el-main>
     </el-container>
   </el-container>
</template>

<script>
  import MainFrame from "@/components/MainFrame"
  import MainNva from "@/components/layout/MainNva"
  import MainMenu from '@/components/layout/MainMenu'
  import MainContainer from "@/components/layout/MainContainer"
  export default {
    name: 'App',
    data(){
      return{
        isshow:false,
        htmlHeight:{
          height:'300px'
        },
          activeIndex:'1',

          activeIndex: '1',
          activeIndex2: '1'
      }
    },
    components:{
      MainFrame,MainMenu,MainContainer,MainNva
    },
    methods:{
    getHtmlHeight(){
    let htmlHeight=window.innerHeight+'px'
    this.$set(this.htmlHeight,"height",htmlHeight)
    }
    ,
    handleSelect(key,keyPath) {
      if(key==1){
          this.$root.$children[0].current=0
      }else if(key==2){
          this.$root.$children[0].current=1
      }else if(key==3){
         this.$root.$children[0].current=2
      }


    }
    ,
    clean(){
      console.log('退出')
    this.$store.commit('logout')
    this.$router.push({path:'/login'})
      console.log(111111)
    }
    },
  mounted(){

   }
,

         computed: {
           user(){
             console.log(JSON.parse(window.sessionStorage.getItem('user')));
             console.log(1)
             if(JSON.parse(window.sessionStorage.getItem('user'))==null){
               console.log("判断没有登陆")
               this.$router.push({path:'/login'})
               console.log(2)

             }
             this.$store.commit('menu',JSON.parse(window.sessionStorage.getItem('menu')));
             return this.$store.state.user;
           },
           menu(){
             if(this.$store.state.menu==null){

               this.$store.commit('menu',JSON.parse(window.sessionStorage.getItem('menu')));
             }
             return this.$store.state.menu;
           }

         }


  }
</script>

<style scoped="scoped">
  html,body,.el-container{

      padding: 0px;

      margin: 0px;

      height: 100%;
    }
  .el-header, .el-footer {
      background-color: #545c64;

      text-align: center;
      line-height: 60px;
    }

    .el-aside {
      background-color: #D3DCE6;

      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #E9EEF3;

      text-align: center;
      line-height: 50px;
    }

    body > .el-container {
      margin-bottom: 40px;

    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
    .el-menu-nav {
        background-color: #545c64;

        text-align: center;
        height: 100%;
      }
      .el-submenu .el-menu-item{
      background-color: #545c64;

      }
</style>
